<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./request/requset.js"></script>
  <style>
    *{
    margin: 0;
    padding: 0;
  }
  body{
    background-color: #2b3c4d;
    display: flex;
    justify-content: center;
  }
  .bigbox{
    width: 300px;
    height: 300px;
    margin-top: 200px;
    text-align: center;
  }
  .bigbox div{
    margin-top: 20px;
    width: 300px;
    height: 150px;
    background-color: rgb(255, 255, 255);
   padding: 30px 67px;
   box-sizing: border-box;
    box-sizing: border-box;
  }
  .bigbox button{
    width: 50px;
    height: 30px;
    margin-top: 10px;
    border: 0;
    background-color: #409eff;
    border-radius: 10px;
    color: #fff;
  
  }
  a{
    text-decoration: none;
    color: white;
  }
  p{
    color: red;
  }
  </style>
</head>
<body>
  <div class="bigbox">
    <h1>后台管理系统</h1>
    <div>
      <table>
        <tr>
          <td>
             <input type="text" name="name" id="" placeholder="请输入用户名">
          </td>
        </tr>
        <tr>
          <tr>
            <td></td>
          </tr>
          <td>
            <input type="password" name="pwd" id="" placeholder="请输入密码">
          </td>
        </tr>
      </table>
      <p></p>
      <button>登录</button>
    </div>
  </div>
</body>
<script>
  // 获取登录按钮
const oBtn = document.querySelector('button')
// 获取用户名
const name = document.querySelector('[name = name]')
// 获取密码
const pwd = document.querySelector('[name = pwd]')
// 获取提示框
const oP = document.querySelector('p')
oBtn.addEventListener('click' , ()=>{
  console.log(name.value)
  if(!/^\w{4,10}$/.test(name.value)){
    oP.innerHTML = '请输入数字/字母/下划线4-10位账号'
    return
  }else{
    oP.innerHTML = ''
  }

  if(!/^\d{6}$/.test(pwd.value)){
    oP.innerHTML = '请输入六位数密码'
    return
  }else{
    oP.innerHTML = ''
  }
  window.location.href = '/front/index.html'
})  
</script>
</html>